<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui"/>
    <title>echarts图表报表</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../plugins/vue/vue.js"></script>
    <script src="../../api/member.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../plugins/element-ui/index.js"></script>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">

</head>
<body>
<div id="app" class="my-box">
    <div class="my-box-right">
        <el-select v-model="selectedOption" placeholder="请选择">
            <el-option
                    v-for="(value, key) in sMap"
                    :label="key"
                    :value="key">
            </el-option>
        </el-select>

        <div id="main" style="height:450px;">
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            id : '',
            sMap:new Map(),
            selectedOption:''
        },
        methods: {
            async init () {
                axios.get('/scheme/team/'+this.id).then(res => {
                    this.sMap=res.data.data
                    console.log('this is a map')
                    console.log(this.sMap)
                })
            },
            getInfo(key){

            }
        },
        created(){
            this.id = requestUrlParam('id')
            if (this.id) {
                this.init()
            }
        },
        watch:{
            selectedOption(key) {
                axios.get('/scheme/getInfo/'+key).then(res=>{
                    let title=[]
                    let value=[]
                    for (var i=0; i<res.data.data.length;i++){
                        title[i]=res.data.data[i].rate
                        const date = new Date(res.data.data[i].belongTime); // 使用构造函数创建一个新的 Date 实例
                        const year = date.getFullYear(); // 获取年份
                        const month = date.getMonth() + 1; // 获取月份（注意月份从 0 开始，所以需要加 1）
                        const day = date.getDate(); // 获取日期
                        value[i]=`${year}-${month}-${day}`;
                    }
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        xAxis: {
                            type: 'category',
                            data: value
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: title,
                                type: 'line'
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                })
            }
        }
    });
</script>
</html>